const {ccclass, property} = cc._decorator;

enum ANIM_TYPE {			
    DOWN = 'down',
    UP = 'up',
    SHOW = 'show'
};

const CLICKED_COLOR: cc.Color = cc.color(160, 160, 160);
const NORMAL_COLOR: cc.Color = cc.color(255, 255, 255);
const CLICKED_BASE_SCALE: number = 0.88; // 点击后按钮的基础缩放系数

@ccclass
export default class Q3Button extends cc.Component {

    @property({tooltip: '延迟显示的时间(秒)'})
    delayShowTime: number = 0;
    @property({tooltip: '是否展示出现动效'})
    isPlayShowEffect: boolean = true;

    btnTween: cc.Tween = null; // 记录按钮正在执行的tween，方便停止
    baseScale: number = 1; // 基础缩放系数
    anim: cc.Animation = null; // Animation组件

    onLoad () {
        // 添加点击事件监听
        this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.node.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);
        this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);

        this.anim = this.getComponent(cc.Animation);

        if (this.delayShowTime <= 0) {
            this.show();
        } else {
            this.node.scale = 0;
            this.scheduleOnce( () => {
                this.show();
            }, this.delayShowTime);
        }
    }

    // 按钮被按下
    onTouchStart (event: cc.Event.EventTouch) : void {
        this.node.color = CLICKED_COLOR;
        this.stopTween();
        this.anim.play(ANIM_TYPE.DOWN);
    }

    // 按钮正常弹起
    onTouchEnd(event: cc.Event.EventTouch) : void{
        this.node.color = NORMAL_COLOR;
        this.node.getComponent(cc.Animation).play(ANIM_TYPE.UP);
    }

    // 按钮取消弹起
    onTouchCancel (event : cc.Event.EventTouch) : void {
        console.log("onTouchCancel");

        this.node.color = NORMAL_COLOR;
        this.node.getComponent(cc.Animation).play(ANIM_TYPE.UP);
    }

    // 动画播放完成回调
    onAnimComplete (animType: string) : void {
        if (animType == ANIM_TYPE.DOWN) {
            this.baseScale = CLICKED_BASE_SCALE;
        } else {
            this.baseScale = 1.0;
        }
        
        this.showNormalEffect();
    }

    // 按钮出现
    show () {
        this.stopTween();

        this.node.active = true;
        if (this.isPlayShowEffect) {
            this.anim.play(ANIM_TYPE.SHOW);
        } else {
            this.node.scale = 1.0;
            this.node.angle = 0;
            this.baseScale = 1.0;
            this.node.color = NORMAL_COLOR;
            this.showNormalEffect();
        }
    }

    // 安装正常显示效果
    showNormalEffect () {
        this.stopTween();

        let t = cc.tween();
        this.btnTween = cc.tween(this.node)
                            .repeatForever(
                                t.to(0.3, {scaleX: this.baseScale * 1.025, scaleY: this.baseScale * 0.975})
                                .to(0.3, {scaleX: this.baseScale * 0.975, scaleY: this.baseScale * 1.025})).start();
    }

    // 停止正在执行的动效
    stopTween () {
        if (this.btnTween) {
            this.btnTween.stop();
            this.btnTween = null;
        }
    }

    // 重置按钮状态，用于“再来一遍”功能
    reset () : void {
        this.node.scale = 0;
        this.node.angle = 0;
        this.baseScale = 1.0;
        this.node.color = NORMAL_COLOR;
        this.node.active = false;
    }

}
